{{ title = "Results" }}
{{ scripts = ["haplogroups.js"] }}
{{include "../layouts/header.view.html"}}

<div style="padding-top: 70px; width: 100%; background-color: rgb(239,239,239);">
  <ul class="nav nav-tabs" id="myTab" role="tablist" style="width: 100%; padding-left: 30px; padding-right: 30px;">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="summary-tab" data-toggle="tab" href="#summary" type="button" role="tab" aria-controls="summary" aria-selected="true">
        <i class="fas fa-analytics"></i> Summary
      </a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="samples-tab" data-toggle="tab" href="#samples" type="button" role="tab" aria-controls="samples" aria-selected="false">
        Samples ({{job.samples}})
      </a>
    </li>

    {{if !selfContained}}
    <li class="nav-item dropdown ml-auto">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-download"></i> Export</a>

      <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
        <a class="dropdown-item" href="{{routeUrl("jobs_download", {job: job.id, file: "haplogroups.csv"})}}" target="_blank"><i class="fas fa-file-csv"></i> Haplogroups (CSV)</a>
        <a class="dropdown-item" href="{{routeUrl("jobs_download", {job: job.id, file: "haplogroups.extended.csv"})}}" target="_blank"><i class="fas fa-file-csv"></i> Haplogroups (Extended CSV)</a>
        <a class="dropdown-item" href="{{routeUrl("jobs_download", {job: job.id, file: "samples.qc.txt"})}}" target="_blank"><i class="fas fa-file-csv"></i> Quality Control (CSV)</a>
        <a class="dropdown-item" href="{{routeUrl("jobs_download", {job: job.id, file: "snps.annotations.txt"})}}" target="_blank"><i class="fas fa-file-csv"></i> Annotations (CSV)</a>

        {{ if job.isAdditionalOutput() }}
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="{{routeUrl("jobs_download", {job: job.id, file: "sequence.fasta"})}}" target="_blank"><i class="fas fa-file"></i> Fasta</a>
        <a class="dropdown-item" href="{{routeUrl("jobs_download", {job: job.id, file: "sequence_MSA.fasta"})}}" target="_blank"><i class="fas fa-file"></i> MSA Fasta</a>
        {{ end }}
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="{{routeUrl("jobs_download", {job: job.id, file: "haplogroups.zip"})}}" target="_blank"><i class="fas fa-file-archive"></i> Report and Data (Zip)</a>

      </div>
    </li>
    {{end}}

  </ul>
</div>


<div id="" style="padding: 30px;">

    <!-- Summary !-->
    <div class="tab-content" id="myTabContent">

      <div class="tab-pane active" id="summary" role="tabpanel" aria-labelledby="summary-tab"  style="width: 100%">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4 col-sm-12">
              {{include "cards/haplogroups.html"}}
            </div>
            <div class="col-md-4  col-sm-12">
              {{include "cards/haplogroups.table.html"}}
            </div>
            <div class="col-md-4  col-sm-12">
              {{include "cards/quality-control.html"}}<br>
              {{include "cards/details.html"}}<br>
              {{if !selfContained}}
                {{include "cards/share-url.html"}}
              {{end}}
            </div>
          </div>
        </div>
    </div>

    <!-- Samples !-->
    <div class="tab-pane" id="samples" role="tabpanel" aria-labelledby="samples-tab" style="width: 100%">
      {{include "cards/samples.html"}}
    </div>

  </div>
</div>

<script>
  {{include "recentUploads.js"}}
</script>

{{include "../layouts/footer.view.html"}}
